<template>
	<view class="audio-page">
		<view class="box-left">
			<image class="box-img" :src="props.image" mode="aspectFill"></image>
			<view class="page-btn" @click="clickAudio">
				<image :src="VF.music_play?VF.stop_img:VF.start_img" mode="widthFix"></image>
			</view>
		</view>
		<view class="box-content">
			<view class="content-name">{{props.title}}</view>
			<view class="progress">
				<text>{{getMinuteTime(VF.now_time)}}</text>
				<slider :value="VF.now_time/VF.total_time*100" block-size="10" block-color="#FF3333"
								activeColor="#FF3333" @change="sliderChange"></slider>
				<text>{{getMinuteTime(VF.total_time)}}</text>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, reactive } from 'vue';
interface Props {
	autoplay : boolean,
	music : string,
	image : string,
	title : number | string,
}
let props = withDefaults(defineProps<Props>(), {
	autoplay: false,
	music: '',
	image: '',
	title: '',
})

interface reactiveRules {
	music_play : boolean,
	AUDIO : any,
	total_time : any,
	now_time : any,
	timeupdata : any,
	interval : any,
	start_img : string
	stop_img : string
}

let VF = reactive<reactiveRules>({
	music_play: false,
	AUDIO: '',
	total_time: 0,
	now_time: 0,
	timeupdata: '',
	interval: '',
	start_img: "",
	stop_img: ""
})

onMounted(()=>{
	playAudio()
})

const getMinuteTime = (data : any) => {
	let minute : any = parseInt((data / 60).toString())
	let second : any = parseInt((data % 60).toString())
	if (minute.toString().length == 1) minute = `0${minute}`
	if (second.toString().length == 1) second = `0${second}`
	return `${minute}:${second}`
}

const clickAudio = () => {
	if (VF.music_play) {
		VF.music_play = false
		VF.AUDIO.pause()
	} else {
		VF.music_play = true
		VF.AUDIO.play()
	}
}

const sliderChange = (e : any) => {
	console.log(e)
	let second = e.detail.value / 100 * VF.total_time
	VF.AUDIO.seek(second)
	VF.now_time = second
}

const playAudio = () => {
	VF.AUDIO = uni.createInnerAudioContext()
	VF.AUDIO.src = props.music
	if (props.autoplay) {
		VF.AUDIO.autoplay = true
		VF.music_play = true
		VF.AUDIO.play()
	}
	VF.interval = setInterval(() => {
		if (VF.AUDIO.duration != 0 && !isNaN(VF.AUDIO.duration)) {
			VF.total_time = Math.round(VF.AUDIO.duration)
			console.log("音频时长", VF.total_time)
			clearInterval(VF.interval)
		}
	}, 100)
	VF.timeupdata = setInterval(() => {
		console.log(VF.now_time / VF.total_time * 100)
		if (VF.music_play) {
			VF.now_time++
			console.log("当前时间", getMinuteTime(VF.now_time))
			if (VF.now_time >= VF.total_time) {
				VF.music_play = false
				VF.now_time = 0
				// clearInterval(VF.timeupdata)
			}
		}
	}, 1000)
}
onBeforeUnmount(()=>{
	VF.music_play = false
	VF.AUDIO.pause()
	clearInterval(VF.timeupdata)
})
</script>

<style lang="scss">
.audio-page{
	width: 600upx;
	height: 150upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 3upx 3upx 6upx #ccc;
	.box-left{
		width: 150upx;
		height: 150upx;
		position: relative;
		display: flex;
		.box-img{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
		}
		.page-btn{
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 3;
			image{
				width: 50upx;
				height: 50upx;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border-radius: 50%;
			}
		}
	}
	.box-content{
		width: 450upx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 30upx;
		box-sizing: border-box;
		font-size: 24upx;
		.content-name{
			width: 100%;
			display: -webkit-box;/* 弹性盒模型 */
			-webkit-box-orient: vertical;/* 元素垂直居中*/
			-webkit-line-clamp: 1;/*  文字显示的行数*/
			overflow:hidden;/* 超出隐藏 */
		}
		.progress{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			slider{
				width: 80%;
			}
		}
	}
}
</style>